<template>
  <div class="versionList">
    <el-dialog title="版本" :visible.sync="dialogTableVisible">
      <el-table :data="versionData" style="margin-bottom: 20px">
        <el-table-column property="id" label="ID"></el-table-column>
        <el-table-column property="name" label="页面名称"></el-table-column>
        <el-table-column property="version" label="版本"></el-table-column>
        <el-table-column label="关联模板" width="200px">
          <template slot-scope="scope">
            <el-link
              type="success"
              v-for="(item, index) in scope.row.templateProperties"
              :key="index"
              @click="getDomainList(item.id)"
              >{{ item.name }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column property="note" label="备注"></el-table-column>
        <el-table-column property="createName" label="作者"></el-table-column>
        <el-table-column property="createTime" label="创建时间"></el-table-column>
        <el-table-column property="updateTime" label="更新时间"></el-table-column>
        <el-table-column label="发布状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">已发布</el-tag>
            <el-tag type="success" v-if="scope.row.status == 0">未发布</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="formdata.pageSize"
        :current-page="formdata.pageNum"
        @current-change="SetPage"
      ></el-pagination>

      <el-dialog width="50%" title="发布域名" :visible.sync="innerVisible" append-to-body>
        <el-table :data="domainListData">
          <el-table-column property="platName" label="平台名称"></el-table-column>
          <el-table-column property="domainName" label="域名"></el-table-column>
          <el-table-column property="releaseUpdateName" label="发布人"></el-table-column>
          <el-table-column
            property="templateUpdateTime"
            label="更新时间"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import { getPageDataList, getPageDomainList } from "@/api/basisMG";
export default {
  props: {
    tableDialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      versionData: [],
      domainListData: [],
      dialogTableVisible: false,
      innerVisible: false,
      formdata: {
        pageId: "",
        pageNum: 1,
        pageSize: 10,
      },
      domformdata: {
        appitemId: "",
        templateId: "",
        domainName: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  methods: {
    // 分页
    SetPage(e) {
      this.formdata.pageNum = e;
      this.getPageDataList();
    },
    // 获取页面数据列表
    async getPageDataList() {
      const res = await getPageDataList(this.formdata);
      if (res.data) {
        this.versionData = res.data.content;
        this.total = res.data.total;
      } else {
        this.versionData = [];
      }
    },
    // 获取页面数据域名列表
    async getPageDomainList() {
      const res = await getPageDomainList(this.domformdata);
      if (res.data) {
        this.domainListData = res.data.content;
      } else {
        this.domainListData = [];
      }
    },
    showVersion(data) {
      this.dialogTableVisible = true;
      this.formdata.pageId = data.id;
      this.getPageDataList();
    },
    getDomainList(id) {
      this.innerVisible = true;
      this.domformdata.templateId = id;
      this.getPageDomainList();
    },
  },
  created() {},
  watch: {
    // 监听 tableDialogVisible 改变
    tableDialogVisible(oldVal, newVal) {
      this.dialogTableVisible = this.tableDialogVisible;
    },
  },
};
</script>
<style lang="scss"></style>
